<template> 
 <!--vue2封装写法  -->
    <el-dialog  
      v-model="isVisible"  
      :width="dialogWidth"  
      :close-on-click-modal="false"  
      @close="handleClose"  
      append-to-body  
    >  
      <template #title>  
        <span class="dialog-header-title">{{ title }}</span>  
      </template>  
      <slot name="formBox"></slot>  
      <template #footer v-if="hasFooter">  
        <el-button size="small" @click="handleCancel">取 消</el-button>  
        <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>  
      </template>  
    </el-dialog>  
  </template>  
  
  <script>  
  export default {  
    name: 'DialogCommon',  
    props: {  
      modelValue: {  
        type: Boolean,  
        default: false // 设置默认值为 false  
      },  
      title: String,  
      dialogWidth: {  
        type: String,  
        default: '50%' // 设置默认宽度  
      },  
      hasFooter: {  
        type: Boolean,  
        default: true  
      },  
      onCancel: {  
        type: Function,  
        default: () => {}  
      },  
      onSubmit: {  
        type: Function,  
        default: () => {}  
      }  
    },  
    emits: ['update:modelValue'], // 声明发出的事件，以兼容 v-model  
    computed: {  
      isVisible: {  
        get() {  
          return this.modelValue;  
        },  
        set(value) {  
          this.$emit('update:modelValue', value);  
        }  
      }  
    },  
    methods: {  
      handleClose() {  
        this.isVisible = false; // 使用 setter 方法更新显示状态  
        this.onCancel(); // 调用取消回调  
      },  
      handleCancel() {  
        this.isVisible = false; // 使用 setter 方法更新显示状态  
        this.onCancel(); // 调用取消回调  
      },  
      handleSubmit() {  
        this.onSubmit(); // 点击确定按钮时调用提交回调  
        // 根据需要，如果要关闭弹窗，可以取消注释这行  
        this.isVisible = false;  
      }  
    }  
  };  
  </script>  
  
  <style scoped>  
  .dialog-header-title i {  
    color: #357ff9;  
  }  
  .txt-right .el-form-item__label {  
    text-align: right;  
  }  
  </style>